<template>
  <div class="commonBoxmp">
    <TableV2
      ref="tableV2Ref"
      :tableOptions="{
        'header-cell-style': {},
        rowStyle: {
          cursor: 'pointer',
        },
      }"
      :data="state.tableData"
      @getParmas="getParmas"
      :columns="state.columnData"
      showIndex
    >
      <template #tableHeader>
        <div class="jcb aic w100">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="ID或者姓名">
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
                clearable
              />
            </el-form-item>

            <el-form-item label="创建时间">
              <el-date-picker
                v-model="formInline.date"
                type="date"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-form>
          <div class="aic">
            <el-button type="primary" @click="roleDrawer = true"
              >新增用户</el-button
            >
            <!-- 
            <el-button type="success" @click="roleDrawer = true"
              >生成代码</el-button
            > -->
          </div>
        </div>
      </template>

      <template #tableName="scope">
        <el-link type="primary" @click="handleGoDetail">{{
          scope.row.tableName
        }}</el-link>
      </template>
      <template #operation>
        <el-table-column label="操作" width="190" fixed="right" align="right">
          <template #default="scope">
            <el-button
              size="small"
              link
              type="primary"
              @click="handleDelete(scope.$index, scope.row)"
              >编辑</el-button
            >
            <!-- <el-button
              size="small"
              link
              type="primary"
              @click="handleDelete(scope.$index, scope.row)"
              >生成代码</el-button
            > -->
            <el-button
              size="small"
              link
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </TableV2>
    <AllRight v-model="centerDialogVisible" />
    <AddOrEdit v-model="roleDrawer" />
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, watch, shallowRef } from "vue";

import Column from "/@ts/components/table/Column";
import type { FormInstance } from "element-plus";
import {
  AddOrEdit,AllRight
} from './component/index';
import { columns } from "./data";
import {
  generateFakeData
} from './mock/index'
const formInline =  ref({})
let centerDialogVisible = shallowRef(false);
const roleDrawer = shallowRef(false);


const editableTabsValue = ref("1");

 const getParmas = (data) =>{
  // window.log.object("筛选条件",data)
 }

onMounted(() => {
  state.tableData = generateFakeData(10);
});

const tableV2Ref = ref();
const state: any = reactive({
  height: 0,
  columnData: columns,
  tableData: [],
});


const handleGoDetail = () => {
  centerDialogVisible.value = true;
};
</script>

<style scoped lang="scss"></style>
